<template>
  <div id="shop">
    <el-card class="box-card">
      <div class="breadcrumb">
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item>商品设置</el-breadcrumb-item>
            <el-breadcrumb-item>商铺列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="shop-content">
        <span>商铺列表</span>
        <div class="shop-data">
          <div class="search-input">
            店铺名:<el-input
              v-model="input_select.input"
              placeholder="请输入内容"
              size="small"
            />
          </div>
          <div class="search-input">
            行业:
            <el-select
              v-model="input_select.select"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.industry_name"
                :value="item.industry_name"
              />
            </el-select>

            <!-- <div class="search-input">
              行业:<el-input
                v-model="input_select.select"
                placeholder="请输入内容"
                size="small"
              />
            </div> -->
          </div>
          <div class="search-input">
            <el-button
              type="primary"
              size="small"
              @click="queryBtn"
            >查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </div>
        <el-button
          type="primary"
          size="small"
          class="add-shop"
          @click="addJ"
        >+ 新建</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        max-height="350"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="shop_name" label="店铺名称" width="140" />
        <el-table-column prop="industry_name" label="行业" width="120" />
        <el-table-column prop="addr" label="地址" width="220" />
        <el-table-column prop="username" label="推广人名称" width="120" />
        <el-table-column prop="" label="销售额" width="120">
          <template slot-scope="scope">
            {{ scope.row.hyp === 0 ? 0 : scope.row.hyp + "元" }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="状态" width="120">
          <template slot-scope="scope">
            <div>
              <i
                :class="
                  scope.row.sts === true
                    ? 'status-display-true'
                    : 'status-display-false'
                "
              />
              {{ scope.row.sts === true ? "运营中" : "停运" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="shop_photo"
          label="操作"
          fixed="right"
          width="380px"
        >
          <template slot-scope="scope">
            <ul class="edit">
              <li
                v-for="(item, index) in operation"
                :key="index"
                @click="PathModify(index, scope.row)"
              >
                {{ item }}
              </li>
            </ul>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="start">
        <el-pagination
          style="margin-top: 20px"
          :current-page="queryInfo.currentPage3"
          :page-sizes="[2, 4, 8, 10]"
          :page-size="queryInfo.pageSize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

      <!-- 弹出层 -->
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose"
      >
        <eject ref="uerForm" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button
            v-show="isShow"
            type="primary"
            @click="addUser"
          >确 定</el-button>
        </span>
      </el-dialog>
      <good-list ref="good" />
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import eject from './ShopChild/eject.vue'
import {
  zzq,
  xxx,
  query,
  industryList,
  modify,
  del,
  prove,
  date,
  order,
  _user,
  zzzqq
} from '../../api/shopList'
import GoodList from './ShopChild/GoodList.vue'

export default {
  components: { eject, GoodList },
  data() {
    return {
      title: '',
      _use_id: '',
      userId: '',
      // 确认按钮
      isShow: true,
      uid: '',
      use_id: {},
      options: [],
      // 弹出层
      dialogVisible: false,
      // flage
      flage: false,
      // 搜索框value

      input_select: {
        input: '',
        // 下拉选项value
        select: ''
      },
      queryInfo: {
        // 但前页
        currentPage3: 1,
        //  每页显示多少条数据
        pageSize: 4
      },
      total: 1,
      tableData: [],
      multipleSelection: [],
      operation: ['详情', '查看商品', '', '启用/停用', '删除', '编辑'],
      pppp: [],
      oooo: []
    }
  },
  computed: {
    ...mapGetters(['fromAggregate', 'isName', 'formDelivery', 'userList'])
  },
  created() {
    this.hyp()
    this.industry()
    this.$store.dispatch('shopsList/pathIndustry')
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      this.queryInfo.pageSize = val
      this.pathDate()
    },
    handleCurrentChange(val) {
      this.queryInfo.currentPage3 = val
      this.pathDate()
    },
    // 弹出层
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.userId = ''
          done()
          this.$refs.uerForm.$refs.ruleFormA.resetFields()
          this.$refs.uerForm.$refs.formDelivery.resetFields()
        })
        .catch((_) => {})
    },
    // 表单确认
    addUser() {
      if (this.userId === 5) {
        modify(this._use_id, this.$refs.uerForm.formLabelAlign).then((res) => {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          this.hyp()
        })
        this.userId = ''
        this.dialogVisible = false
        return
      }
      var fal = true
      prove().then((res) => {
        res.data.forEach((item) => {
          if (item.userid === this.formDelivery.userid) {
            if (item.shop_name === this.formDelivery.shop_name) {
              this.$message.error('该店铺名已存在')
              this.$store.commit('shopsList/flageName', false)
              fal = false
            } else {
              this.$store.commit('shopsList/flageName', true)
            }
          }
        })
        if (!fal) {
          return
        }
        if (this.isName === false) {
          this.$message.error('该店铺名已存在了....')
          return
        }

        this.$refs.uerForm.$refs.ruleFormA.validate((value) => {
          if (value) {
            this.flage = true
          }
        })
        this.$refs.uerForm.$refs.ruleFormA.validate((value) => {
          if (value && this.flage) {
            this.$store.commit('shopsList/deconstruction')
            xxx(this.fromAggregate)
              .then((res) => {
                this.$refs.uerForm.$refs.ruleFormA.resetFields()
                this.$refs.uerForm.$refs.formDelivery.resetFields()
                this.dialogVisible = false
                this.$message({
                  showClose: true,
                  message: '添加成功',
                  type: 'success'
                })
                this.hyp()
              })
              .catch((res) => {
                alert('添加失败')
              })
          }
        })
      })
    },

    cancel() {
      this.userId = ''
      // 重置表单
      this.$refs.uerForm.$refs.ruleFormA.resetFields()
      this.$refs.uerForm.$refs.formDelivery.resetFields()

      this.dialogVisible = false
    },

    async queryBtn() {
      // 查询
      const data = await query(this.input_select)
      this.total = data.total

      const { data: ddd } = await order()
      for (let i = 0; i < data.data.length; i++) {
        // 为每个商铺添加一个hyp对象用于保存销售额
        data.data[i].hyp = 0
        data.data[i].idx = 0
        for (let j = 0; j < ddd.length; j++) {
          if (data.data[i].id === ddd[j].shop_id) {
            data.data[i].hyp += ddd[j].ordr_amt
            if (ddd[j].ordr_amt !== 0) {
              data.data[i].idx++
            }
          }
        }
      }
      this.tableData = data.data
    },

    async pathDate() {
      // 商铺列表数据
      const { data: data } = await date(this.queryInfo)
      const { data: zzq } = await zzzqq()
      // const { data: use } = await _user();
      // 订单列表数据
      const { data: ddd } = await order()

      // var newArr = JSON.parse(JSON.stringify(zzq));
      // let result = [];
      // newArr.forEach((item) => {
      //   result.push(item.userid);
      // });

      // function unique(arr) {
      //   let result = [];
      //   arr.forEach((item) => {
      //     if (result.indexOf(item) === -1) {
      //       result.push(item);
      //     }
      //   });
      //   return result;
      // }
      // result = unique(result);
      // let result2 = [];
      // result.forEach((item) => {
      //   result2.push({ userid: item, idx: 0 });
      // });

      //  var adx=0
      // function dg(){
      //   let result=[]
      //   newArr[adx].userid
      //     zzq.forEach(item=>{
      //       if()
      //     })

      //   adx++
      // }
      // dg()

      // }

      for (let i = 0; i < zzq.length; i++) {
        // 为每个商铺添加一个hyp对象用于保存销售额
        zzq[i].hyp = 0
        zzq[i].idx = 0
        for (let j = 0; j < ddd.length; j++) {
          if (zzq[i].id === ddd[j].shop_id) {
            zzq[i].hyp += ddd[j].ordr_amt
            if (ddd[j].ordr_amt !== 0) {
              zzq[i].idx++
            }
          }
        }
      }

      for (let i = 0; i < data.length; i++) {
        // 为每个商铺添加一个hyp对象用于保存销售额
        data[i].hyp = 0
        for (let j = 0; j < ddd.length; j++) {
          if (data[i].id === ddd[j].shop_id) {
            data[i].hyp += ddd[j].ordr_amt
          }
        }
      }
      // 处理完数据在赋值给data里面的对象

      //   result2.forEach((item) => {
      //     zzq.forEach((value) => {
      //       if (item.userid === value.userid) {
      //         item.idx += value.idx;
      //       }
      //     });
      //   });
      //  zzq.forEach(item=>{
      //    console.log(item.username,item.userid,item.idx);
      //  })

      this.tableData = data
    },

    async hyp() {
      const data = await zzq()
      // this.tableData = data.data;
      this.total = data.total
      this.pathDate()
    },
    async industry() {
      const { data: data } = await industryList()
      this.options = data
    },
    PathModify(index, value) {
      var _data = JSON.parse(JSON.stringify(value))
      // 停/启
      if (index === 3) {
        if (_data.sts) {
          _data.sts = false
        } else {
          _data.sts = true
        }
        modify(value.id, _data).then((res) => {
          this.$message({
            showClose: true,
            message: '修改状态成功',
            type: 'success'
          })
          this.hyp()
        })
      } else if (index === 4) {
        // 删除
        del(_data.id).then((res) => {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          this.hyp()
        })
      } else if (index === 5) {
        this.userId = 5
        this._use_id = value.id
        this.isShow = true
        // 编辑
        this.$store.commit('shopsList/gaiIsXQ', false)
        const p = new Promise((reslove, reject) => {
          reslove((this.dialogVisible = true))
        })
        p.then((res) => {
          this.title = '商铺编辑'
          this.$refs.uerForm.pathEdit(value.id)
        })
      } else if (index === 0) {
        this.isShow = false
        this.$store.commit('shopsList/gaiIsXQ', true)
        const p = new Promise((reslove, reject) => {
          reslove((this.dialogVisible = true))
        })
        p.then((res) => {
          this.title = '商铺详情'
          this.$refs.uerForm.pathEdit2(value.id)
        })
      } else if (index === 1) {
        this.$refs.good.btn()
        this.$refs.good.path_good(value.id)
      }
    },
    reset() {
      this.input_select.input = ''
      this.input_select.select = ''
      this.hyp()
    },
    addJ() {
      this.title = '添加店铺'
      const p = new Promise((reslove, reject) => {
        reslove((this.dialogVisible = true))
      })
      p.then((res) => {
        this.$refs.uerForm.bianji = false
        this.$refs.uerForm.isAdd()
        this.$refs.uerForm.formLabelAlign.shop_avatar = ''
        //  this.$refs.uerForm.pathEdit(value.id);
      })
      this.isShow = true
      this.$store.commit('shopsList/gaiIsXQ', false)
    }
  }
}
</script>
<style scoped>
#shop {
  padding: 20px;
  height: 100vh;
  background-color: #fff;
}
.box-card {
  margin-bottom: 20px;
}
.breadcrumb {
  background: #fff;
  border-radius: 5px 5px 0 0;
}
.breadcrumb > div {
  width: 250px;
  height: 100%;
}
.shop-content {
  background: #fff;
}
.shop-content span {
  font-weight: 700;
  font-size: 20px;
}
.search-input {
  width: 350px;
  display: flex;
  white-space: nowrap;
  align-items: center;
}
.search-input .el-input {
  margin-left: 10px;
}
.shop-data {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.add-shop {
  margin-top: 20px;
}
.status-display-true {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00a854;
}
.status-display-false {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f04134;
}
.edit {
  display: flex;
  list-style: none;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
  color: #1890ff;
}
.edit > li {
  cursor: pointer;
}
#shop /deep/ .el-dialog__body {
  margin-top: 5px;
  border-radius: 5px 5px 0 0;
  border: 1px solid rgb(212, 205, 205);
}
</style>

